<template>
  <div class="distrib_list">
    <div class="distrib_list_search">
      <div class="search_box">
        <el-select
          style="width: 180px;"
          filterable
          v-model="featchData.gameServerId"
          placeholder="请选择"
        >
          <el-option
            v-for="item in gameServerOption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <span style="float: left">{{ item.label}}</span>
          </el-option>
        </el-select>
      </div>
      <div class="search_box">
        <el-select
          style="width: 145px;"
          v-model="featchData.orderStatus"
          placeholder="请选择"
        >
          <el-option
            v-for="item in orderStatusOption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <span style="float: left">{{ item.label }}</span>
          </el-option>
        </el-select>
      </div>
      <!-- <div class="search_box">
        <el-select
          style="width: 180px;"
          filterable
          v-model="featchData.assistantAgencyId"
          placeholder="请选择"
        >
          <el-option
            v-for="item in assistantAgencyOption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <span style="float: left">{{ item.label}}</span>
          </el-option>
        </el-select>
      </div> -->
      <div class="search_box">
        <el-radio-group v-model="timeType">
          <el-radio-button
            v-for="item in timeOptions"
            :key="item.id"
            :label="item.id"
            >{{ item.name }}</el-radio-button
          >
        </el-radio-group>
      </div>
      <div class="search_box">
        <el-date-picker
          v-model="featchData.dateTime"
          style="width: 290px;"
          type="daterange"
          clearable
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="dateTimeChange"
        >
        </el-date-picker>
      </div>
      <div class="search_box">
        <el-input
          style="width: 180px;"
          v-model="featchData.query"
          placeholder="订单编号"
        ></el-input>
      </div>
      <div class="search_box">
        <el-button class="seach_btn" type="primary" style="height: 36px;" @click="searchData">搜索</el-button>
        <span @click="resetData()" class="reset_btn">重置</span>
      </div>
    </div>
    <div class="distrib_list_table">
      <div class="total_data">
        <span class="data_label">本页合计 ：</span>
        <span class="custom_text">订单金额</span>
        <span class="num_data" style="color: #56a500;">{{ totleordermoney }}</span>
        <span class="custom_text">元，订单退款金额</span>
        <span class="num_data" style="color: #cf0d17;">{{ totlerefundmoney }}</span>
        <span class="custom_text">元。</span>
      </div>
      <page-table-new
        :tableData="tableData"
        :total="total"
        :featchData="featchData"
        :defaultSort="{ prop: 'modifyTime', order: 'descending' }"
        :tableColumns="tableColumns"
        @pageChange="handlePageChange"
        @sortChange="handleSortChange"
      >
        <!-- 充值时间 -->
        <template #payat="scope">
            <div>
                <span>{{ dateFormat(scope.row.payat) }}</span>
            </div>
        </template>
        <!-- 充值账号 -->
        <template #paymethod="scope">
            <div>
                <span v-if="scope.row.paymethod === '1'">支付宝</span>
                <span v-else-if="scope.row.paymethod === '2'">微信</span>
                <span v-else-if="scope.row.paymethod === '3'">网银</span>
                <span v-else> - </span>
            </div>
        </template>
        <!-- 充值账号 -->
        <template #accountid="scope">
            <div>
                <span>{{ payuserFormat(scope.row.accountid) }}</span>
            </div>
        </template>
        <!-- 订单状态 -->
        <template #orderstatus="scope">
            <div v-if="scope.row.orderstatus === 0">
                <span style="background: #56A500;" class="status_tag"></span><span>正常</span>
            </div>
            <div v-if="scope.row.orderstatus === 1">
                <span class="status_tag"></span><span>已退款</span>
            </div>
        </template>
        <template #action="scope">
            <div>
                <el-button 
                  type="default" 
                  @click="dialogDetile(scope.row)"
                >
                  <span>操作记录</span>
                </el-button>
            </div>
        </template>
      </page-table-new>
    </div>
      <!-- 操作记录 -->
      <el-dialog
        title="操作记录"
        :visible.sync="dialogDetileVisible"
        width="670px"
      >
        <page-table-new
          :tableData="tableDataDetile"
          :tableColumns="tableColumnsDetile"
          @pageChange="handleOrderChange"
          :featchData="orderData"
          :ordertotal="ordertotal"
        >
          <!-- 结算时间 -->
          <template #settleat="scope">
              <div>
                  <span v-if="scope.row.settleat">{{ dateFormat(scope.row.settleat,'yyyy-MM-dd HH:mm:ss') }}</span>
                  <span v-else> - </span>
              </div>
          </template>
        </page-table-new>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogDetileVisible = false">关闭</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import pageTableNew from "@com/tableNew";
import { getListOrderByPage,getGameServerList,getOrderOpList } from "@/api/distrib";
import {  
    ORDER_TABLE_COLUMNS,
    ORDEROPLIST_TABLE_COLUMNS,
    ORDER_STATUS_OPTIONS,
    TIME_LIST
} from "../const";

import { formatDate } from "@/utils/validate";
import { getCookie } from "@/utils/auth";
export default {
  components: { pageTableNew },
  data() {
    return {
      timeType: 1, //1: 今日 2昨日：近7日 1: 近1个月 3：近3个月
      roleType: getCookie("roleType"),
      childRoleName:'',
      dialogDetileVisible:false,
      timeOptions: TIME_LIST,
      featchData: {
        pageSize: 20,
        pageStart: 1,
        sortBool:'',
        sortType:'',
        dateTime: [], //时间区间
        query: "",   //订单号进行模糊查询
        orderStatus:'', //订单状态
        gameServerId:'',    //区服id
      },
      gameServerOption:[
        {
            id:"",
            name: "游戏分区：全部",
            label: "全部"
        },
      ],
      orderData:{
        pageSize: 20,
        pageStart: 1,
        orderId:'',
      },
      orderStatusOption: ORDER_STATUS_OPTIONS, // 订单状态
      tableData: [],
      tableColumns: ORDER_TABLE_COLUMNS,
      total: 0,
      tableDataDetile:[],
      tableColumnsDetile:ORDEROPLIST_TABLE_COLUMNS,
      ordertotal:0,
      totleordermoney:0,
      totlerefundmoney:0,
    };
  },
  watch:{
    timeType:function(val,old){
      var nowDate = new Date();
      switch(val){
        case 1:
          break;
        case 2:
          nowDate =  new Date(new Date().getTime() - 24*60*60*1000);
          break;
        case 3:
          nowDate =  new Date(new Date().getTime() - 24*60*60*1000*7);
          break;
      }
      let d = nowDate.getDate();
      let M = nowDate.getMonth() + 1;
      let y = nowDate.getFullYear();
      if(val === 4){
        M = M - 1;
        this.featchData.dateTime = [
          formatDate(new Date(new Date(y+'-'+M+'-'+d).getTime() + 86400000),'yyyy-MM-dd'),
          formatDate(new Date(),'yyyy-MM-dd'),
        ]
      }else if(val === 5){
        M = M - 3;
        this.featchData.dateTime = [
          formatDate(new Date(new Date(y+'-'+M+'-'+d).getTime() + 86400000),'yyyy-MM-dd'),
          formatDate(new Date(),'yyyy-MM-dd'),
        ]
      }else{
        this.featchData.dateTime = [
          formatDate(new Date(y+'-'+M+'-'+d),'yyyy-MM-dd'),
          formatDate(new Date(),'yyyy-MM-dd'),
        ]
      }
      if(val === 2){
        this.featchData.dateTime[1] = this.featchData.dateTime[0];
      }
      this.featchData.pageStart = 1;
      this.searchData();
    }
  },
  created() {
    this.featchData.dateTime = [
      formatDate(new Date(),'yyyy-MM-dd'),
      formatDate(new Date(),'yyyy-MM-dd'),
    ]
    this.childRoleName = this.$store.state.user.childRoleName;
    this.getGameList();
    this.searchData();
  },
  computed: {
    dateFormat(){
      return function(date){
        if(date){
          return formatDate(new Date(date),'yyyy-MM-dd HH:mm:ss')
        }
      }
    },
    payuserFormat(){
      return function(payuser){
        if(payuser.length < 4){
          return "****"
        }
        return payuser.substr(0,2)+"***"+payuser.substr(payuser.length-2,2)
      }
    }
  },
  methods: {
    //重新搜索
    resetData() {
      this.featchData = {
        pageSize: 20,
        pageStart: 1,
        sortBool:'',
        sortType:'',
        dateTime: [], //时间区间
        query: "",   //订单号进行模糊查询
        orderStatus:'', //订单状态
        gameServerId:'',    //区服id
        // assistantAgencyId:'',   //推广商id
      };
      this.$nextTick(()=>{
        this.searchData();
        this.timeType = 1;
      })
    },
    dateTimeChange(){
      this.timeType = '';
    },
    getGameList(){
        getGameServerList().then(res=>{
            if(res.code === 0){
                res.data.forEach((item) => {
                    this.gameServerOption.push({
                        id:item.id,
                        name: "游戏分区："+item.subname,
                        label: item.subname
                    })
                })
            }
        })
    },
    searchData() {
      let params = {
        page: this.featchData.pageStart,
        pageSize: this.featchData.pageSize,
        sortBool:this.featchData.sortBool,
        sortType:this.featchData.sortType,
        startAt: this.featchData.dateTime[0]?new Date(this.featchData.dateTime[0]).getTime():'',
        endAt: this.featchData.dateTime[1]?new Date(this.featchData.dateTime[1]).getTime():'',
        query: this.featchData.query,
        orderStatus: this.featchData.orderStatus,
        gameServerId: this.featchData.gameServerId,
        // assistantAgencyId: this.featchData.assistantAgencyId,
      };
      getListOrderByPage(params).then(res => {
        if(res.code === 0){
          this.total = res.data.total;
          this.tableData = res.data.values;
          this.totleordermoney = res.data.totleordermoney;
          this.totlerefundmoney = res.data.totlerefundmoney;
        }else{
          this.$message.error(res.message);
        }
      });
    },
    handlePageChange(value) {
      this.featchData.pageSize = value.pageSize;
      this.featchData.pageStart = value.pageStart;
      this.searchData();
    },
    handleSortChange(data) {
      this.featchData.sortBool = data.sortBool?-1:1;
      this.featchData.sortType = data.sortType;
      this.searchData();
    },
    handleOrderChange(value){
      this.orderData.pageSize = value.pageSize;
      this.orderData.pageStart = value.pageStart;
      this.getOrderOpList();
    },
    // 查看操作详情
    dialogDetile(row){
      this.tableDataDetile = [];
      this.getOrderOpList(row);
      this.dialogDetileVisible = true;
    },
    getOrderOpList(row){
      this.orderData.orderId = row?row.orderid:this.orderData.orderId;
      let data = {
        page:this.orderData.pageStart,
        pageSize:this.orderData.pageSize,
        orderId:this.orderData.orderId
      }
      //获取订单操作记录
      getOrderOpList(data).then(res => {
        if(res.code === 0){
          this.tableDataDetile = res.data.values;
          this.ordertotal = res.data.total;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.distrib_list {
  .distrib_list_search {
    .search_box {
      display: inline-block;
      vertical-align: top;
      margin-right: 6px;
      margin-bottom: 16px;
      .reset_btn {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #777777;
        text-align: justify;
        margin-left: 12px;
        cursor: pointer;
      }
    }
  }
  .total_data {
    font-size: 14px;
    margin-bottom: 16px;
    line-height: 22px;
    height: 22px;
    box-sizing: border-box;
    .data_label {
      font-family: PingFangSC-Semibold;
      color: #404040;
      font-weight: 600;
    }
    .custom_text {
      font-family: PingFangSC-Regular;
      color: #404040;
    }
    .num_data {
      font-weight: 600;
    }
  }
  .distrib_list_table {
    background: #ffffff;
    box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.09);
    border-radius: 4px;
    padding: 16px 16px 0 16px;
    margin: 0 0 16px 0;
    .status_tag {
      display: inline-block;
      height: 6px;
      width: 6px;
      border-radius: 50%;
      background: #cf0d17;
      margin-right: 6px;
      position: relative;
      top: -2px;
    }
    .red_button {
      margin-left: 4px;
    }
    .table_btn {
      display: inline-block;
      box-sizing: border-box;
      height: 22px;
      line-height: 20px;
      width: 40px;
      text-align: center;
      border-radius: 4px;
      border: 1px solid #06367c;
      color: #06367c;
      cursor: pointer;
    }
  }
}
</style>
